<template>
  <div class="hrm-panel-content-wrapper" ref="container">
    <div class="panel-content" v-show="panelVisible">
      <header class="panel-header" ref="header">
        <img :src="logoImg" alt="" class="avatar" />
        <h4 class="title">
          <span v-if="userInfo">{{ userInfo.realname }}</span>
          <span v-else>华曼简历助手</span>

          <el-tooltip
            content="退出"
            append-to="body"
            placement="top"
          >
            <a @click="onLogout" class="logout" v-show="userInfo">
              <img :src="logoutImg" alt="退出" />
            </a>
          </el-tooltip>

          <!-- <el-tooltip placement="top" title="手动解析" :getPopupContainer="getPopupContainer" :mouseLeaveDelay="0">
            <a @click="handleOnManual" class="logout">
              <reload-outlined :style="{fontSize: '20px', color: 'rgb(94,167,248)'}" />
            </a>
          </el-tooltip> -->
        </h4>
        <el-tooltip content="收起">
          <span class="btn-collapse" @click="onPanelToggle">
            <el-icon><DArrowRight /></el-icon>
          </span>
        </el-tooltip>
      </header>
      <panel-login
        v-if="panelName === 'LOGIN'"
        :onPanelChange="onPanelChange"
      />
      <panel-work
        ref="panelWork"
        v-if="panelName === 'WORK'"
        :panelVisible="panelVisible"
        :onPanelVisible="onPanelVisible"
        :userInfo="userInfo"
        :sites="sites"
      />
    </div>
    <el-tooltip v-if="!panelVisible" content="展开">
      <template #title>展开</template>
      <div class="btn-expand" @click="onPanelToggle">
        <img :src="logoImg" alt="" class="avatar" />
        <label>简历助手</label>
        <span class="icon">
          <el-icon><DArrowLeft /></el-icon>
        </span>
      </div>
    </el-tooltip>
  </div>
</template>

<script>
import PanelWork from "./panel-work"
import PanelLogin from "./panel-login"
import { getFromStorage, logoutClear } from "../lib"

const logoImg = chrome.runtime.getURL("assets/assistant@2x.png")
const logoutImg = chrome.runtime.getURL("assets/logout.png")

export default {
  name: "ContentPanel",
  props: {
    sites: Array,
  },
  components: {
    PanelWork,
    PanelLogin,
  },
  data() {
    return {
      logoImg,
      logoutImg,
      panelVisible: false,
      panelName: undefined,
      userInfo: undefined,
    }
  },
  methods: {
    handleOnManual() {
      if (this.$refs?.panelWork?.getResume) {
        this.$refs.panelWork.getResume("MANUAL")
      }
    },
    async getUserInfo() {
      const userInfo = await getFromStorage("HRMS_USERINFO")
      if (userInfo) {
        this.userInfo = userInfo
      }
    },
    onPanelToggle() {
      this.onPanelVisible(!this.panelVisible)
    },
    async onPanelChange(v) {
      console.log("onPanelChange value: >>", v)
      this.panelName = v
      await this.getUserInfo()
    },
    onPanelVisible(v) {
      chrome.storage.sync.set({HRMS_VISIBLE: v})
      this.panelVisible = v
    },
    onLogout() {
      logoutClear()

      this.onPanelChange("LOGIN")

      this.$nextTick(() => {
        this.userInfo = undefined
      })
    },
    getPopupContainer(triggerNode) {
      return triggerNode.parentNode
    },
  },
  async created() {
    await this.getUserInfo()

    const pageName = (await getFromStorage("HRMS_PAGE")) || "LOGIN"
    this.onPanelChange(pageName)

    const visible = await getFromStorage("HRMS_VISIBLE")
    this.panelVisible = visible ?? true
  },
  mounted() {
    const container = this.$refs.container
    const header = this.$refs.header
    let isDown = false
    let offset = [
      container.offsetLeft,
      container.offsetTop
    ]

    header.addEventListener('mousedown', function(e) {
      isDown = true
      offset = [
        container.offsetLeft - e.clientX,
        container.offsetTop - e.clientY
      ]

    }, true)

    document.addEventListener('mouseup', function() {
      isDown = false
    }, true)

    document.addEventListener('mousemove', function(event) {
      event.preventDefault()
      if (isDown) {
        const mousePosition = {
          // x : event.clientX,
          y : event.clientY
        }
        // container.style.left = (mousePosition.x + offset[0]) + 'px';
        container.style.top  = (mousePosition.y + offset[1]) + 'px'
      }
    }, true)
  },
}
</script>

<style lang="less" scoped>
@import "./styles/panel.less";
</style>
